// 企业收藏
<template>
  <!-- 我的收藏 -->
  <div>
    <NavigationComponent />
    <SearchInput @sortListClick="getSortListClick">
      <template v-slot:search>
        <el-input
          placeholder="请输入搜索内容"
          :prefix-icon="Search"
          v-model="searchValue"
          class="inputClass"
          @keyup.enter.native="getTableData('reset')"
        >
        </el-input>
      </template>
    </SearchInput>

    <!-- 内容 -->
    <div class="table_box">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-style="{ height: '52px' }"
        :header-row-style="{ height: '52px' }"
        @row-dblclick="handleRowDblClick"
      >
        <el-table-column label="文件名" prop="realName" show-overflow-tooltip sortable>
          <!-- <template slot-scope="fileName">
              <svg-icon :icon-class="selectSvgIcons(fileName.row)" style="font-size: 30px; vertical-align: middle; margin-right: 6px"></svg-icon>
              <span class="realName_class">
                {{ `${fileName.row.realName}${fileName.row.suffix ? '.' : ''}${fileName.row.suffix || ''} ` }}
              </span>
            </template> -->

          <template #default="scope">
            <svg-icon :icon-class="selectSvgIcons(scope.row)" style="font-size: 30px; vertical-align: middle; margin-right: 6px"></svg-icon>
            <span class="realName_class">
              {{ `${scope.row.realName}${scope.row.suffix ? '.' : ''}${scope.row.suffix || ''} ` }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="path" label="文件来源">
          <template #default="scope">
            <span v-if="scope.row.source == 'personal'">个人文档</span>
            <span v-else-if="scope.row.source == 'team'">团队文档</span>
            <span v-else>企业文档</span>
            <!-- {{ sourceList[pageType] }} -->
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable> </el-table-column>

        <el-table-column prop="size" label="大小" sortable>
          <template #default="scope">{{ proxy?.$yuUtils.filterSizeUnit(scope.row.size) }}</template>
        </el-table-column>

        <el-table-column prop="deleteBy" label="操作" fixed="right" align="center">
          <template v-slot="collect">
            <el-tooltip effect="dark" content="取消收藏">
              <span @click.stop="CancelCollection(collect.row)">
                <svg-icon v-if="collect.row.collection == '0'" icon-class="collect" class="icon_size"></svg-icon>
                <svg-icon v-else icon-class="collect-fill" class="icon_size"></svg-icon>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="getSizeChange"
        @current-change="getPageChange"
        :current-page="commonParams.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="commonParams.size"
        layout="total, prev, pager, next, sizes"
        :total="commonParams.total"
      />
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { useEnterpriseDocStore } from '@/store/modules/enterpriseDoc';
const docStore = useEnterpriseDocStore();
const rowData: any = ref(docStore.row); // 获取父组件传递过来的数据
import { apifilesCollectionCancelCollection } from '@/api/enterpriseDoc/enterpriseDocApi';
import { apiFilesCollectionQuery } from '@/api/enterpriseDoc/enterpriseCollectApi';
import { ApiPerGetParentTreeNodeAll } from '@/api/personDoc/personDocApi';
import { ref, reactive, onMounted, watch, defineProps, defineEmits, getCurrentInstance } from 'vue';
import { Search } from '@element-plus/icons-vue';
import NavigationComponent from './component/enterpriseCollect/navigation-component.vue'; // 导航信息
import SearchInput from './component/enterpriseCollect/search-input.vue'; //搜索
const { proxy } = getCurrentInstance() as any;

const searchValue = ref('');

const sourceList = reactive({
  personal: '个人文档',
  team: '团队文档',
  enterprise: '企业文档'
});

const tableData = ref([]);
const commonParams = reactive({
  page: 1,
  size: 10,
  total: 0,
  sort: { sortDesc: 'create_time' } as any
});

const props = defineProps({
  pageType: String
});

/**icon转换 */
const selectSvgIcons = (v: any) => {
  return proxy.$yuUtils.selectSvgIcon(v);
};
// 排序点击
const getSortListClick = (val: any) => {
  if (val.valueIndex == 0) {
    commonParams.sort = { sortDesc: 'create_time' };
  } else {
    if (val.title == '文件名称') {
      commonParams.sort = val.valueIndex == 1 ? { nameSort: 'ASC' } : { nameSort: 'DESC' };
    } else {
      commonParams.sort = { ...val.value[val.valueIndex - 1] };
    }
  }

  getTableData('');
};

// 获取table列表数据
const getTableData = async (reset) => {
  if (reset == 'reset') {
    commonParams.page = 1;
    commonParams.size = 10;
  }
  let oParam = {
    page: commonParams.page - 1,
    size: commonParams.size,
    fileType: 2,
    realName: null,
    libraryId: rowData.value.id
  };
  // 搜索输入框
  if (searchValue.value) {
    oParam.realName = searchValue.value;
  }

  let oParams = { ...oParam, ...commonParams.sort };
  const res:any = await apiFilesCollectionQuery(oParams);
  tableData.value = res.data.rows;
  commonParams.total = res.data.total;
  // console.log(res, '列表数据');
};

// 表格点击行
const handleRowDblClick = async (row: any) => {
  let params = {
    id: row.id,
    fileType: 2
  };
  let res = await ApiPerGetParentTreeNodeAll(params);
  if (res.code == 200) {
    let expandedKeys = res.data.map((item: any) => {
      let obj = {
        id: parseInt(item.id),
        label: item.realName
      };
      return obj;
    });
    sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys));
    proxy.$router.push({ path: '/newUi/enterprises/enterpriseDoc' });
  }
};

//取消收藏
const CancelCollection = (row: any) => {
  let oParam = {
    treeNodeId: row.id,
    fileType: 2
  };
  apifilesCollectionCancelCollection(oParam).then((res) => {
    if (res.code == 200) {
      ElMessage.success('取消收藏成功');
      getTableData('reset');
    }
  });
  console.log(row, '取消收藏');
};

// 切换页数
const getSizeChange = (val: any) => {
  commonParams.size = val;
  console.log(val, '切换页数');
};

//切换条数
const getPageChange = (val: any) => {
  commonParams.page = val;
  console.log(val, '切换条数');
};

onMounted(() => {
  getTableData('reset');
});
</script>
  
  <style scoped lang="scss">
:deep(.el-input__inner) {
  border: none;
  outline: none;
}

.table_box {
  margin-left: 20px;

  .svg-icon {
    font-size: 18px;
  }

  .realName_class {
    line-height: 40px;
  }
}

.el-pagination {
  margin-top: 25px;
  padding: 16px 0px;
}

.path {
  font-size: 14px;
  color: #606266;
  padding: 20px 0 0;
}

.icon_size {
  cursor: pointer;
}
</style>
  